<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言数据分析报告</title>
    <script src="../../utils/reload.js"></script>
    <script src="./rests/3.4.17"></script>
    <link rel="stylesheet" href="../../style/all.min.css" />
    <script src="../../api/echarts.min.js"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#36CFC9",
              success: "#52C41A",
              warning: "#FAAD14",
              danger: "#FF4D4F",
              info: "#8C8C8C",
              light: "#F5F7FA",
              dark: "#1D2129",
            },
            fontFamily: {
              inter: ["Inter", "sans-serif"],
            },
          },
        },
      };
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .card-shadow {
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        .hover-scale {
          transition: transform 0.3s ease;
        }
        .hover-scale:hover {
          transform: scale(1.02);
        }
        .btn-toggle {
          @apply px-4 py-2 rounded-lg text-sm font-medium transition-colors;
          @apply bg-white text-gray-600 hover:bg-gray-50;
        }
        .btn-toggle.active {
          @apply bg-primary/10 text-primary;
        }
      }
    </style>
  </head>
  <body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
    <div class="flex flex-1 overflow-hidden">
      <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
        <div id="analysis-page" class="space-y-6">
          <div
            class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0"
          >
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">
              留言数据分析报告
            </h2>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="bg-white rounded-xl p-4 card-shadow hover-scale">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-500 text-sm font-medium">总留言数</p>
                  <h3 class="text-2xl font-bold mt-1" id="total-messages">
                    12,846
                  </h3>
                  <p class="text-success flex items-center mt-2 text-sm">
                    <i class="fas fa-arrow-up mr-1"> </i>
                    <span> 12.5% 较上月 </span>
                  </p>
                </div>
                <div
                  class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary"
                >
                  <i class="fas fa-comment text-lg"> </i>
                </div>
              </div>
            </div>
            <div class="bg-white rounded-xl p-4 card-shadow hover-scale">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-500 text-sm font-medium">日均留言数</p>
                  <h3 class="text-2xl font-bold mt-1" id="daily-messages">
                    183
                  </h3>
                  <p class="text-success flex items-center mt-2 text-sm">
                    <i class="fas fa-arrow-up mr-1"> </i>
                    <span> 8.2% 较上月 </span>
                  </p>
                </div>
                <div
                  class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary"
                >
                  <i class="fas fa-calendar-check text-lg"> </i>
                </div>
              </div>
            </div>
            <div class="bg-white rounded-xl p-4 card-shadow hover-scale">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-500 text-sm font-medium">平均满意度</p>
                  <h3 class="text-2xl font-bold mt-1" id="satisfaction-score">
                    4.6/5
                  </h3>
                  <p class="text-danger flex items-center mt-2 text-sm">
                    <i class="fas fa-arrow-down mr-1"> </i>
                    <span> 0.3 较上月 </span>
                  </p>
                </div>
                <div
                  class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning"
                >
                  <i class="fas fa-star text-lg"> </i>
                </div>
              </div>
            </div>
            <div class="bg-white rounded-xl p-4 card-shadow hover-scale">
              <div class="flex items-start justify-between">
                <div>
                  <p class="text-gray-500 text-sm font-medium">已回复率</p>
                  <h3 class="text-2xl font-bold mt-1" id="reply-rate">92.3%</h3>
                  <p class="text-success flex items-center mt-2 text-sm">
                    <i class="fas fa-arrow-up mr-1"> </i>
                    <span> 3.7% 较上月 </span>
                  </p>
                </div>
                <div
                  class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success"
                >
                  <i class="fas fa-check-circle text-lg"> </i>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-white rounded-xl p-6 card-shadow">
            <div
              class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"
            >
              <div>
                <h3 class="text-lg font-bold text-dark">留言趋势分析</h3>
                <p class="text-gray-500 text-sm mt-1">
                  查看留言数量随时间的变化趋势
                </p>
              </div>
              <div
                class="flex flex-wrap gap-3 mt-4 md:mt-0"
                data-button-group="time-granularity"
              >
                <button class="btn-toggle active" data-value="daily">
                  按日
                </button>
                <button class="btn-toggle" data-value="weekly">按周</button>
                <button class="btn-toggle" data-value="monthly">按月</button>
                <button class="btn-toggle" data-value="quarterly">
                  按季度
                </button>
              </div>
            </div>
            <div class="h-[400px]">
              <div id="trend-chart" class="w-full h-full"></div>
            </div>
          </div>
          <div class="bg-white rounded-xl p-6 card-shadow">
            <div
              class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"
            >
              <div>
                <h3 class="text-lg font-bold text-dark">热门话题分析</h3>
                <p class="text-gray-500 text-sm mt-1">
                  识别留言中讨论最多的话题和关键词
                </p>
              </div>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div class="lg:col-span-2 h-[350px]">
                <div id="topics-chart" class="w-full h-full"></div>
              </div>
              <div class="space-y-4">
                <div
                  class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
                  data-topic="组织建设"
                >
                  <div
                    class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4"
                  >
                    <i class="fas fa-sitemap"> </i>
                  </div>
                  <div class="flex-1">
                    <div class="flex justify-between items-center">
                      <h4 class="font-medium">组织建设</h4>
                      <span class="text-sm font-semibold topic-count"> 0 </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div
                        class="bg-primary h-1.5 rounded-full topic-progress"
                        style="width: 0%"
                      ></div>
                    </div>
                  </div>
                </div>
                <div
                  class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
                  data-topic="反腐倡廉"
                >
                  <div
                    class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mr-4"
                  >
                    <i class="fas fa-hands-helping"> </i>
                  </div>
                  <div class="flex-1">
                    <div class="flex justify-between items-center">
                      <h4 class="font-medium">反腐倡廉</h4>
                      <span class="text-sm font-semibold topic-count"> 0 </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div
                        class="bg-secondary h-1.5 rounded-full topic-progress"
                        style="width: 0%"
                      ></div>
                    </div>
                  </div>
                </div>
                <div
                  class="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
                  data-topic="政策咨询"
                >
                  <div
                    class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-4"
                  >
                    <i class="fas fa-comment-dots"> </i>
                  </div>
                  <div class="flex-1">
                    <div class="flex justify-between items-center">
                      <h4 class="font-medium">政策咨询</h4>
                      <span class="text-sm font-semibold topic-count"> 0 </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                      <div
                        class="bg-warning h-1.5 rounded-full topic-progress"
                        style="width: 0%"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg-white rounded-xl p-6 card-shadow">
            <div
              class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"
            >
              <div>
                <h3 class="text-lg font-bold text-dark">满意度分析</h3>
                <p class="text-gray-500 text-sm mt-1">
                  分析用户对不同话题的满意度评价
                </p>
              </div>
            </div>
            <div class="h-[350px]">
              <div id="satisfaction-radar-chart" class="w-full h-full"></div>
            </div>
          </div>

          <!-- [/MODULE] j0l_数据分析页面:典型留言示例 -- 包含留言筛选功能和典型留言列表，展示不同话题和满意度的典型留言内容 -->
        </div>
        <!-- [/MODULE] d4e_数据分析页面 -- 包含数据分析报告的完整内容，包括核心指标、留言趋势分析、热门话题分析、满意度分析和典型留言示例 -->
      </main>
      <!-- [/MODULE] c3f_主内容区域 -- 包含数据分析页面的所有内容 -->
    </div>
    <script id="chart-initialization">
      // 页面加载时初始化渲染
      document.addEventListener("DOMContentLoaded", function () {
        // 初始化所有数据
        initAllData();

        // 初始化主要图表
        initTrendChart();
        initSatisfactionCharts();

        // 监听窗口大小变化，调整图表大小
        window.addEventListener("resize", function () {
          resizeCharts();
        });
      });

      // 初始化留言趋势图表
      function initTrendChart(value) {
        console.log(value || "");
        var trendChart = echarts.init(document.getElementById("trend-chart"));

        // 生成过去7天的日期标签
        // var dates = [];
        // var today = new Date();
        // for (var i = 6; i >= 0; i--) {
        //   var date = new Date(today);
        //   date.setDate(today.getDate() - i);
        //   dates.push(
        //     "".concat(date.getMonth() + 1, "/").concat(date.getDate())
        //   );
        // }
        var option = {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            borderColor: "#E5E6EB",
            borderWidth: 1,
            padding: 10,
            textStyle: {
              color: "#1D2129",
            },
            axisPointer: {
              type: "shadow",
            },
            formatter: function formatter(params) {
              return '<div class="font-medium">'
                .concat(
                  params[0].name,
                  '</div>\n                                <div class="mt-1"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#165DFF;"></span>\u7559\u8A00\u6570:'
                )
                .concat(
                  params[0].value,
                  '</div>\n                                <div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#36CFC9;"></span>\u56DE\u590D\u6570:'
                )
                .concat(params[1].value, "</div>");
            },
          },
          legend: {
            data: ["留言数", "回复数"],
            top: 0,
            right: 0,
            textStyle: {
              color: "#4E5969",
            },
            itemWidth: 10,
            itemHeight: 10,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: [
              "10 / 1",
              " 10 / 2",
              " 10 / 3",
              "10 / 4",
              " 10 / 5",
              "10 / 6",
              " 10 / 7",
            ],
            axisLine: {
              lineStyle: {
                color: "#E5E6EB",
              },
            },
            axisLabel: {
              color: "#86909C",
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#86909C",
              formatter: "{value}",
            },
            splitLine: {
              lineStyle: {
                color: "#F2F3F5",
              },
            },
            boundaryGap: [0, 0.1],
          },
          series: [
            {
              name: "留言数",
              type: "bar",
              data: [156, 184, 168, 210, 195, 230, 215],
              barWidth: "40%",
              itemStyle: {
                color: "#165DFF",
                borderRadius: [4, 4, 0, 0],
              },
              emphasis: {
                itemStyle: {
                  color: "#0E42D2",
                },
              },
            },
            {
              name: "回复数",
              type: "line",
              data: [142, 170, 155, 190, 180, 210, 198],
              smooth: true,
              showSymbol: true,
              symbol: "circle",
              symbolSize: 6,
              symbolBackgroundColor: "#36CFC9",
              lineStyle: {
                width: 2,
                color: "#36CFC9",
              },
              itemStyle: {
                borderColor: "#36CFC9",
                borderWidth: 2,
                color: "#fff",
              },
            },
          ],
        };
        trendChart.setOption(option);
        window.trendChart = trendChart;
      }

      // 初始化热门话题图表
      function initTopicsChart() {
        var topicsChart = echarts.init(document.getElementById("topics-chart"));
        var option = {
          tooltip: {
            trigger: "item",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            borderColor: "#E5E6EB",
            borderWidth: 1,
            padding: 10,
            textStyle: {
              color: "#1D2129",
            },
            formatter: function formatter(params) {
              return '<div class="font-medium">'
                .concat(
                  params.name,
                  '</div>\n                                <div class="mt-1">\u7559\u8A00\u6570:'
                )
                .concat(
                  params.value,
                  "</div>\n                                <div>\u5360\u6BD4:"
                )
                .concat(params.percent.toFixed(1), "%</div>");
            },
          },
          legend: {
            orient: "vertical",
            left: "left",
            textStyle: {
              color: "#4E5969",
            },
            itemWidth: 10,
            itemHeight: 10,
            formatter: function formatter(name) {
              var data = topicsChart.getOption().series[0].data;
              var value = data.find(function (item) {
                return item.name === name;
              }).value;
              var total = data.reduce(function (sum, item) {
                return sum + item.value;
              }, 0);
              var percent = ((value / total) * 100).toFixed(1);
              return "".concat(name, "(").concat(percent, "%)");
            },
          },
          series: [
            {
              name: "热门话题",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 6,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: mockApiData.topics,
            },
          ],
        };
        topicsChart.setOption(option);
        window.topicsChart = topicsChart;

        // 更新统计列表
        updateTopicsStatistics(option.series[0].data);
      }

      // 初始化所有数据
      function initAllData() {
        // 更新四个指标卡片
        updateIndicators(mockApiData.indicators);

        // 初始化图表（图表会调用updateTopicsStatistics）
        initTopicsChart();
      }

      // 模拟接口调用 - 获取最新数据
      function fetchLatestData() {
        // 模拟异步请求
        setTimeout(function () {
          // 模拟数据变化
          mockApiData.indicators.totalMessages =
            Math.floor(Math.random() * 5000) + 10000;
          mockApiData.indicators.dailyMessages =
            Math.floor(Math.random() * 100) + 150;
          mockApiData.indicators.satisfactionScore = (
            Math.random() * 1 +
            4
          ).toFixed(1);
          mockApiData.indicators.replyRate = (Math.random() * 10 + 85).toFixed(
            1
          );

          // 更新话题数据
          mockApiData.topics.forEach(function (topic) {
            topic.value = Math.floor(Math.random() * 2000) + 1000;
          });

          // 重新渲染所有数据
          initAllData();

          console.log("数据已更新:", mockApiData);
        }, 1000);
      }

      // 模拟接口数据
      var mockApiData = {
        indicators: {
          totalMessages: 11846,
          dailyMessages: 183,
          satisfactionScore: 4.6,
          replyRate: 92.3,
        },
        topics: [
          {
            value: 3458,
            name: "组织建设",
            itemStyle: {
              color: "#165DFF",
            },
          },
          {
            value: 1876,
            name: "反腐倡廉",
            itemStyle: {
              color: "#36CFC9",
            },
          },
          {
            value: 1245,
            name: "政策咨询",
            itemStyle: {
              color: "#FAAD14",
            },
          },
        ],
      };

      // 更新四个指标卡片
      function updateIndicators(data) {
        document.getElementById("total-messages").textContent =
          data.totalMessages.toLocaleString();
        document.getElementById("daily-messages").textContent =
          data.dailyMessages.toLocaleString();
        document.getElementById("satisfaction-score").textContent =
          data.satisfactionScore + "/5";
        document.getElementById("reply-rate").textContent =
          data.replyRate + "%";
      }

      // 更新热门话题统计列表
      function updateTopicsStatistics(data) {
        // 计算总数
        var total = data.reduce(function (sum, item) {
          return sum + item.value;
        }, 0);

        // 更新每个话题的统计信息
        data.forEach(function (item) {
          var topicElement = document.querySelector(
            '[data-topic="' + item.name + '"]'
          );
          if (topicElement) {
            // 更新数量显示
            var countElement = topicElement.querySelector(".topic-count");
            if (countElement) {
              countElement.textContent =
                " " + item.value.toLocaleString() + " ";
            }

            // 计算百分比并更新进度条宽度
            var percentage = ((item.value / total) * 100).toFixed(1);
            var progressElement = topicElement.querySelector(".topic-progress");
            if (progressElement) {
              progressElement.style.width = percentage + "%";
            }
          }
        });
      }

      // 初始化满意度分析图表
      function initSatisfactionCharts() {
        // 满意度雷达图
        var satisfactionRadarChart = echarts.init(
          document.getElementById("satisfaction-radar-chart")
        );
        var radarOption = {
          tooltip: {
            trigger: "item",
            backgroundColor: "rgba(255, 255, 255, 0.9)",
            borderColor: "#E5E6EB",
            borderWidth: 1,
            padding: 10,
            textStyle: {
              color: "#1D2129",
            },
          },
          legend: {
            data: ["当前满意度", "上月满意度"],
            bottom: 10,
            left: "center",
            textStyle: {
              color: "#4E5969",
            },
            itemWidth: 10,
            itemHeight: 10,
          },
          radar: {
            indicator: [
              {
                name: "组织建设",
                max: 5,
              },
              {
                name: "反腐倡廉",
                max: 5,
              },
              {
                name: "政策咨询",
                max: 5,
              },
            ],
            radius: "70%",
            splitArea: {
              areaStyle: {
                color: [
                  "rgba(255,255,255,0.1)",
                  "rgba(242,243,245,0.3)",
                  "rgba(242,243,245,0.5)",
                ],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#E5E6EB",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#E5E6EB",
              },
            },
            name: {
              textStyle: {
                color: "#4E5969",
              },
            },
          },
          series: [
            {
              name: "当前满意度",
              type: "radar",
              data: [[4.8, 4.5, 4.3, 4.7, 4.6, 4.4]],
              lineStyle: {
                width: 2,
                color: "#165DFF",
              },
              areaStyle: {
                color: "rgba(22, 93, 255, 0.2)",
              },
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#165DFF",
              },
            },
            {
              name: "上月满意度",
              type: "radar",
              data: [[4.7, 4.6, 4.4, 4.6, 4.7, 4.5]],
              lineStyle: {
                width: 2,
                color: "#86909C",
                type: "dashed",
              },
              areaStyle: {
                color: "rgba(134, 144, 156, 0.1)",
              },
              symbol: "circle",
              symbolSize: 6,
              itemStyle: {
                color: "#86909C",
              },
            },
          ],
        };
        satisfactionRadarChart.setOption(radarOption);

        // 存储满意度图表实例
        window.satisfactionCharts = {
          radar: satisfactionRadarChart,
        };
      }

      // 调整所有图表大小
      function resizeCharts() {
        // 调整趋势图表大小
        if (window.trendChart) {
          window.trendChart.resize();
        }

        // 调整热门话题图表大小
        if (window.topicsChart) {
          window.topicsChart.resize();
        }

        // 调整满意度图表大小
        if (window.satisfactionCharts) {
          window.satisfactionCharts.radar.resize();
        }
      }
    </script>
    <!-- [/JSMOD] l2n_图表初始化 -- 初始化页面中所有ECharts图表，包括核心指标迷你趋势图、留言趋势图表、热门话题图表和满意度分析图表，并实现窗口大小变化时的图表调整功能 -->
    <!-- [JSMOD] m3o_页面交互功能 -->
    <script id="page-interactions">
      // 页面加载时初始化渲染
      document.addEventListener("DOMContentLoaded", function () {
        // 初始化交互功能
        initInteractions();
      });

      // 初始化页面交互功能
      function initInteractions() {
        // 统一的按钮切换处理
        document.addEventListener("click", function (e) {
          if (e.target.classList.contains("btn-toggle")) {
            handleButtonToggle(e.target);
          }
        });
      }

      // 统一的按钮切换处理函数
      function handleButtonToggle(clickedButton) {
        // 获取按钮组
        var buttonGroup = clickedButton.closest("[data-button-group]");
        if (!buttonGroup) return;

        // 移除同组其他按钮的激活状态
        var buttons = buttonGroup.querySelectorAll(".btn-toggle");
        buttons.forEach(function (button) {
          button.classList.remove("active");
        });

        // 激活当前按钮
        clickedButton.classList.add("active");

        // 根据按钮组类型执行相应操作
        var groupType = buttonGroup.getAttribute("data-button-group");
        var value = clickedButton.getAttribute("data-value");

        switch (groupType) {
          case "time-granularity":
            handleTimeGranularityChange(value);
            break;
          case "satisfaction-topic":
            handleSatisfactionTopicChange(value);
            break;
        }
      }

      // 处理时间粒度变化
      function handleTimeGranularityChange(value) {
        console.log("时间粒度切换为:", value);
        this.initTrendChart(value);
      }

      // 处理满意度话题变化
      function handleSatisfactionTopicChange(value) {
        console.log("满意度话题切换为:", value);
        // 这里可以添加更新图表的逻辑
        // showNotification(
        //   "满意度分析话题已切换为: " + getSatisfactionTopicLabel(value)
        // );
      }

      // 获取时间粒度标签
      function getTimeGranularityLabel(value) {
        var labels = {
          daily: "按日",
          weekly: "按周",
          monthly: "按月",
          quarterly: "按季度",
        };
        return labels[value] || value;
      }

      // 获取满意度话题标签
      function getSatisfactionTopicLabel(value) {
        var labels = {
          organization: "组织建设",
          "anti-corruption": "反腐倡廉",
          "policy-consultation": "政策咨询",
        };
        return labels[value] || value;
      }

      // 显示通知提示
      function showNotification(message) {
        var type =
          arguments.length > 1 && arguments[1] !== undefined
            ? arguments[1]
            : "info";
        // 创建通知元素
        var notification = document.createElement("div");

        // 设置通知样式和内容
        var bgColor, textColor, icon;
        switch (type) {
          case "success":
            bgColor = "bg-success";
            textColor = "text-white";
            icon = "fa-check-circle";
            break;
          case "error":
            bgColor = "bg-danger";
            textColor = "text-white";
            icon = "fa-exclamation-circle";
            break;
          case "warning":
            bgColor = "bg-warning";
            textColor = "text-white";
            icon = "fa-exclamation-triangle";
            break;
          default:
            bgColor = "bg-primary";
            textColor = "text-white";
            icon = "fa-info-circle";
        }
        notification.className = "fixed top-4 right-4"
          .concat(bgColor, "")
          .concat(
            textColor,
            "px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex items-center"
          );
        notification.innerHTML = '<i class="fas'
          .concat(icon, 'mr-2"></i>\n                <span>')
          .concat(message, "</span>");

        // 添加到文档
        document.body.appendChild(notification);

        // 显示通知
        setTimeout(function () {
          notification.classList.remove("translate-x-full");
        }, 10);

        // 3秒后隐藏通知
        setTimeout(function () {
          notification.classList.add("translate-x-full");
          // 移除元素
          setTimeout(function () {
            document.body.removeChild(notification);
          }, 300);
        }, 3000);
      }
    </script>
    <!-- [/JSMOD] m3o_页面交互功能 -- 实现页面交互功能，包括数据刷新、报告导出、留言筛选和加载更多留言等按钮的交互逻辑，以及通知提示功能 -->
  </body>
</html>
